<ion-content padding>
  <form *ngIf="form" [formGroup]="form" (ngSubmit)="onClickFormSubmit(form.value)">
    <ion-card>
      <ion-card-header>
        <ion-card-title>Bookshelf Details</ion-card-title>
        <ion-card-subtitle></ion-card-subtitle>
      </ion-card-header>

      <ion-card-content>
        <ion-item>
          <ion-label position="stacked">ID</ion-label>
          <ion-input id="id" type="text" readonly="readonly" formControlName="id">
          </ion-input>
        </ion-item>

        <ion-item>
          <ion-label position="stacked">Number of Shelves</ion-label>
          <ion-input id="shelfCount" type="number" required="true" clearInput=true min="1" max="255"
            placeholder="How many shelves does it come with?" formControlName="shelfCount">
          </ion-input>
        </ion-item>
        <ion-label *ngIf="
            form.controls.shelfCount.invalid &&
            (form.controls.shelfCount.dirty || form.controls.shelfCount.touched)
          " class="alert alert-danger">
          <div *ngIf="form.controls.shelfCount.errors.required">
            Number of shelves is required.
          </div>
        </ion-label>

        <ion-item>
          <ion-label position="stacked">Bamboo Harvest ID</ion-label>

          <ion-select formControlName="bambooHarvestId" [(ngModel)]="bookshelf.bambooHarvestId" placeholder="Select a Bamboo Harvest">
            <ion-select-option *ngFor="let aBambooHarvestId of bambooHarvestIds" [value]="aBambooHarvestId">
              {{ aBambooHarvestId }}
            </ion-select-option>
          </ion-select>

        </ion-item>
        <ion-label *ngIf="
            form.controls.bambooHarvestId.invalid &&
            (form.controls.bambooHarvestId.dirty || form.controls.bambooHarvestId.touched)
          " class="alert alert-danger">
          <div *ngIf="form.controls.bambooHarvestId.errors.required">
            Bamboo Harvest ID is required.
          </div>
          <div *ngIf="form.controls.bambooHarvestId.errors.minlength">
            Bamboo Harvest ID must be at least 1 characters long.
          </div>
        </ion-label>

        <ion-grid>
          <ion-row>
            <ion-col>
              <ion-button id="btnCancel" (click)="onClickBtnCancel()" size="medium" color="warning">Cancel</ion-button>
            </ion-col>
            <ion-col>
              <ion-button id="btnSubmit" type="submit" color="primary" class="ion-float-right" [disabled]="!form.valid">
                Submit
              </ion-button>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-card-content>
    </ion-card>
  </form>
</ion-content>